<template>
  <div>
    <!-- 委任配置对话框 -->
    <el-dialog
      :title="title"
      center
      :visible="open2"
      :modal="open2"
      @close="close()"
      width="600px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="form2" :model="form2" :rules="rules2" label-width="80px">
        <el-row>
          <el-form-item :label="$t('authority.userDeptRole.form.appointUser')" prop="userName">
            <el-input v-model="form2.userName" disabled />
          </el-form-item>
        </el-row>
        <el-row>
          <!-- 机构选择组件 -->
          <el-form-item :label="$t('authority.userDeptRole.form.treeDeptIds')" prop="treeDeptIds">
            <ht-dept-select-tree
              ref="deptTree"
              v-model="treeDeptIds"
              :radio="true"
              node-key="code"
              :tenantCode="deptParams.tenantCode"
              @otherChangeChecked="treeChangeChecked"
            ></ht-dept-select-tree>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item :label="$t('authority.userDeptRole.form.roleNames')" prop="roleIds">
            <el-select
              v-model="form2.roleIds"
              multiple
              :placeholder="$t('authority.userDeptRole.rules.pleaseSel')"
              class="common-select"
            >
              <el-option v-for="item in roleOptions" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAppoint">{{ $t("common.confirm") }}</el-button>
        <el-button @click="close">{{ $t("common.cancel") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { rolesByUserId, userRolesByUserId } from "@/api/authority_app/role/roleInfo";
import { deptTreeData } from "@/api/authority_app/deptInfo/deptInfo";
import { saveAppoint } from "@/api/authority_app/userDeptRole/index";

export default {
  name: "addAppoint",
  components: {},
  props: {
    id: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    open2: {
      type: Boolean,
      default: false,
    },
    //选中机构id
    deptId2: {
      type: Array,
      default: [],
    },
    // 表单参数
    form2: {
      type: Object,
      default: {
        userId: "",
        userName: "",
        deptId: "",
        roleIds: "",
        oldDeptId: "",
        tenantCode: "",
        loginName: ""
      },
    },
    // 机构参数
    deptParams: {
      type: Object,
      default: {
        userId: "",
        deptId: "",
        deptCode: "",
        tenantCode: "",
        name: "",
      },
    },
  },
  data() {
    let checkParent = (rule, value, callback) => {
      console.log("rule treeDeptIds", this.treeDeptIds);
      if (!this.treeDeptIds || this.treeDeptIds.length < 1) {
        callback(new Error(this.$t("authority.userDeptRole.rules.selectOrganiz")));
      } else {
        callback();
      }
    };
    return {
      // 角色选项
      roleOptions: [],
      treeDeptIds: "",
      rules2: {
        userName: [
          {
            required: true,
            message: this.$t("authority.userDeptRole.rules.userNameNoEmpty"),
            trigger: "blur",
          },
        ],
        treeDeptIds: [
          {
            required: true,
            message: this.$t("authority.userDeptRole.rules.selectOrganiz"),
            trigger: "change",
            validator: checkParent,
          },
        ],
        roleIds: [
          {
            required: true,
            message: this.$t("authority.userDeptRole.rules.roleIdsNoEmpty"),
            trigger: "blur",
          },
        ],
      },
      deptTreeCheckedValues: [],
      curUserId: "",
    };
  },
  created() {
    this.form2.id = this.id;
    this.treeDeptIds = this.deptParams.deptCode;
    this.getRolesByUserId(this.id, this.deptParams.deptId, this.deptParams.tenantCode);
    console.log("this.form2",this.form2)
  },
  methods: {
    getRolesByUserId(id, deptId, tenantCode) {
      rolesByUserId(id, deptId, tenantCode).then((response) => {
        this.roleOptions = response.result;
      });
    },

    getUserRolesByUserId(userId) {
      return userRolesByUserId(userId).then((response) => {
        response.result.forEach((element) => {
          this.form.roleIds.push(element.id);
        });
      });
    },
    // 取消按钮
    close() {
      this.$emit("changeTypeInfoOpen", false);
    },
    treeChangeChecked(res) {
      this.form2.deptId = res.map((x) => x.id).join(",");
    },
    /** 提交委任 */
    submitAppoint: function () {
      this.treeChangeChecked(this.$refs.deptTree.getSelectDataList());
      this.$refs["form2"].validate((valid) => {
        if (valid) {
          saveAppoint(this.form2).then((response) => {
            this.msgSuccess(this.$t("common.modifySuccess"));
            this.close();
          });
        }
      });
    },
  },
};
</script>
